<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript"  src="blocksit.js"></script>
    <script>
        $(document).ready(function() {
            //vendor script
            $('#header')
                    .css({ 'top':-50 })
                    .delay(1000)
                    .animate({'top': 0}, 800);

            $('#footer')
                    .css({ 'bottom':-15 })
                    .delay(1000)
                    .animate({'bottom': 0}, 800);

            //blocksit define
            $(window).load( function() {
                $('#container').BlocksIt({
                    numOfCol: 5,
                    offsetX: 8,
                    offsetY: 8
                });
            });

            //window resize
            var currentWidth = 1100;
            $(window).resize(function() {
                var winWidth = $(window).width();
                var conWidth;
                if(winWidth < 660) {
                    conWidth = 440;
                    col = 2
                } else if(winWidth < 880) {
                    conWidth = 660;
                    col = 3
                } else if(winWidth < 1100) {
                    conWidth = 880;
                    col = 4;
                } else {
                    conWidth = 1100;
                    col = 5;
                }

                if(conWidth != currentWidth) {
                    currentWidth = conWidth;
                    $('#container').width(conWidth);
                    $('#container').BlocksIt({
                        numOfCol: col,
                        offsetX: 8,
                        offsetY: 8
                    });
                }
            });
        });
    </script>

    <style type="text/css"  >

        body{
            margin:0;
            padding:0;
            background:url(../bg.gif) 0 0 repeat #f7f5f5;
            color:#333;
            font-family:Cambria, Georgia, serif;
            font-size:15px;
            overflow-x:hidden;
        }
        header, section, footer, hgroup{
            display:block;
        }
        a {
            color:#35BFFF;
            text-decoration:none;
        }
        a:hover, a:active{
            color:#91DCFF;
        }

        /* Header */
        #header{
            width:100%;
            background:#000;
            background:rgba(0, 0, 0, 0.8);
            padding:5px 0;
            letter-spacing:1px;
            margin-bottom:20px;
            position:fixed;
            top:0;
            left:0;
            z-index:99;
        }
        #header h1{
            padding:0 20px;
            margin:5px 0;
            text-shadow:2px 1px 1px #333, 2px 2px 1px #888;
            color:#EAEAEA;
            float:left;
            font-size:27px;
        }
        #backlinks{
            float:right;
            padding:0 20px;
            line-height:22px;
            font-weight:bold;
            font-size:13px;
        }
        #backlinks a{
            text-align:right;
            display:block;
        }

        /* Footer */
        #footer{
            width:100%;
            position:fixed;
            padding-left:20px;
            bottom:0;
            left:0;
            line-height:20px;
            color:#888;
            font-size:13px;
            background:rgb(0, 0, 0);
            background:rgba(0, 0, 0, 0.8);
            z-index:99;
        }
        #footer span{
            display:block;
        }

        /* clearfix */
        .clearfix {
            clear:both;
        }

        /* wrapper css */
        #wrapper{
            margin-top:70px;
            width:100%;
        }
        #wrapper hgroup{
            text-align:center;
        }
        #wrapper h2{
            margin:5px 0;
            color:#FF6D99;
            text-shadow:1px 1px 2px #A50031;
            font-size:33px;
            font-family:Arial Narrow, Arial, sans-serif;
        }
        #wrapper h3{
            font-style:italic;
            font-weight:normal;
            font-size:18px;
            text-shadow:1px 1px 0 #fff;
            color:#888;
            margin:5px 0;
        }

        #container{
            position:relative;
            width:1100px;
            margin:0 auto 25px;
            padding-bottom: 10px;

        }
        .grid{
            width:188px;
            min-height:100px;
            padding: 15px;
            background:#fff;
            margin:8px;
            font-size:12px;
            float:left;
            box-shadow: 0 1px 3px rgba(34,25,25,0.4);
            -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
            -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);

            -webkit-transition: top 1s ease, left 1s ease;
            -moz-transition: top 1s ease, left 1s ease;
            -o-transition: top 1s ease, left 1s ease;
            -ms-transition: top 1s ease, left 1s ease;
        }

        .grid strong {
            border-bottom:1px solid #ccc;
            margin:10px 0;
            display:block;
            padding:0 0 5px;
            font-size:17px;
        }/**1000寻素材网www.qianxunsucai.com**/
        .grid .meta{
            text-align:right;
            color:#777;
            font-style:italic;
        }
        .grid .imgholder img{
            max-width:100%;
            background:#ccc;
            display:block;
        }

        @media screen and (max-width : 1240px) {
            body{
                overflow:auto;
            }
        }
        @media screen and (max-width : 900px) {
            #backlinks{
                float:none;
                clear:both;
            }
            #backlinks a{
                display:inline-block;
                padding-right:20px;
            }
            #wrapper{
                margin-top:90px;
            }
        }
    </style>
</head>
<body>

<!-- Header -->
<header id="header">
    <script language="JavaScript" src="http://www.qianxunsucai.com/ads/ad2011.js"></script>
</header>

<!-- Content -->
<section id="wrapper">
    <hgroup>
        <h2>BlocksIt.js 演示实例 2</h2>
        <h3>动态网格布局的jQuery插件</h3>
    </hgroup>
    <div id="container">
        <div class="grid">
            <div class="imgholder">
                <img src="images/img27.jpg" />
            </div>
            <strong>Sunset Lake</strong>
            <p>A peaceful sunset view...</p>
            <div class="meta">by j osborn</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img26.jpg" />
            </div>
            <strong>Bridge to Heaven</strong>
            <p>Where is the bridge lead to?</p>
            <div class="meta">by SigitEko</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img15.jpg" />
            </div>
            <strong>Autumn</strong>
            <p>The fall of the tree...</p>
            <div class="meta">by Lars van de Goor</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img23.jpg" />
            </div>
            <strong>Winter Whisper</strong>
            <p>Winter feel...</p>
            <div class="meta">by Andrea Andrade</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img17.jpg" />
            </div>
            <strong>Light</strong>
            <p>The only shinning light...</p>
            <div class="meta">by Lars van de Goor</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img22.jpg" />
            </div>
            <strong>Rooster's Ranch</strong>
            <p>Rooster's ranch landscape...</p>
            <div class="meta">by Andrea Andrade</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img16.jpg" />
            </div>
            <strong>Autumn Light</strong>
            <p>Sun shinning into forest...</p>
            <div class="meta">by Lars van de Goor</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img21.jpg" />
            </div>
            <strong>Yellow cloudy</strong>
            <p>It is yellow cloudy...</p>
            <div class="meta">by Zsolt Zsigmond</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img28.jpg" />
            </div>
            <strong>Herringfleet Mill</strong>
            <p>Just a herringfleet mill...</p>
            <div class="meta">by Ian Flindt</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img2.jpg" />
            </div>
            <strong>Battle Field</strong>
            <p>Battle Field for you...</p>
            <div class="meta">by Andrea Andrade</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img24.jpg" />
            </div>
            <strong>Sundays Sunset</strong>
            <p>Beach view sunset...</p>
            <div class="meta">by Robert Strachan</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img19.jpg" />
            </div>
            <strong>Sun Flower</strong>
            <p>Good Morning Sun flower...</p>
            <div class="meta">by Zsolt Zsigmond</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img5.jpg" />
            </div>
            <strong>Beach</strong>
            <p>Something on beach...</p>
            <div class="meta">by unknown</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img25.jpg" />
            </div>
            <strong>Flowers</strong>
            <p>Hello flowers...</p>
            <div class="meta">by R A Stanley</div>
        </div>
        <div class="grid">
            <div class="imgholder">
                <img src="images/img20.jpg" />
            </div>
            <strong>Alone</strong>
            <p>Lonely plant...</p>
            <div class="meta">by Zsolt Zsigmond</div>
        </div> <!---->
    </div>
</section>


</body>
</html>